<template>
  <view class="index">
    <view v-for="(item, index) in pages" :key="index">
      <block v-if="item.name == 'search'"><w-search :content="item.content" :styles="item.styles" /></block>
      <block v-if="item.name == 'banner'"><w-banner :content="item.content" :styles="item.styles" /></block>
      <block v-if="item.name == 'nav'"><w-nav :content="item.content" :styles="item.styles" /></block>
    </view>
    <view class="article" v-if="article.length">
      <view class="flex items-center article-title mx-[20rpx] my-[30rpx] text-2xl font-medium">最新资讯</view>
      <news-card v-for="item in article" :key="item.id" :news-id="item.id" :item="item" />
    </view>
    <tabbar />
  </view>
</template>

<script>
export default {
  data() {
    return {
      pages: [],
      article: []
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    getData() {
      uni.$u.api.getIndex().then(res => {
        console.log('getIndex', res);
        this.pages = JSON.parse(res.page.data);
        this.article = res.article;
      });
    }
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
